@charset "utf-8";

//样式里的l,m,r,t,b分别代表左，中，右，上，下
//布局
main {
  > * {
    display: flex;
    overflow: hidden; //可以让元素严格按照百分比显示，而防止被内部大尺寸元素撑住
  }
h3 .more{
  position: absolute;
  right: 2rem;
  font-style: italic;
  font-size: 1.25rem;
}
  .l {
    flex: 0 0 66.66%;
    padding: 1rem;

    .chart-wrap {
      position: relative;

      .radioGroup {
        position: absolute;
        right: 2rem;
        top: 4rem;
        z-index: 1;

        input {
          vertical-align: middle;
        }
      }

      .chart-box {
        flex: 1;
        position: absolute;
        width: 100%;
        bottom: 0;
        //height: 100%;
        //height: 0; //这样可以不让内部元素撑住高度而破坏布局比例
        .chart {
          height: 53.125rem;
        }
      }
    }
  }

  .r {
    flex: 0 0 33.33%;
    flex-direction: column;

    > div {
      display: flex;
      flex: 0 0 50%;
      padding: 1rem;

      .chart-wrap {
        position: relative;

        .blessings-input-wrap {
          position: absolute;
          right: 3rem;
          padding-top: 7rem;

          #blessings_input {

            position: relative;
            transform: rotate(-90deg);
            transform-origin: right top;
            top: 1.5rem;
            width: 16rem;

          }

          label {
            position: absolute;
            right: -2rem;

            #blessings_input_show {
              //position: absolute;
              //top: 0;
            }
          }
          .label1,.label2{
            position: absolute;
            right: 0;
          }
          .label1{
            top: 8.5rem;
          }
          .label2{
            top: 23rem;
          }

        }

        .startTime-input-wrap {
          position: relative;
          height: 3rem;
          z-index: 1;
          label {
            position: absolute;
            top: 0;
            right: 4rem;
           }
          #startTime_input {
            position: absolute;
            top: 1rem;
            left: 3rem;
            width: 29rem;
          }
        }

      }

    }
    .r-b{
      .text{
        position: absolute;
        top: 4rem;
        left: 2rem;
        width: 20rem;
        strong{
          font-size: 2rem;
        }
      }
      .input-group{
        position: absolute;
        right: 2rem;
        bottom: .5rem;
        label{
          display: block;
          output{
            display: inline-block;
            width: 1rem;
          }
          input{
            position: relative;
            margin: .75rem 0;
            vertical-align: middle;
            width: 7rem;
            height: 2rem;
            &:before,&:after{
              font-size: .9125rem;
              position: absolute;
              top: -1rem;
            }
            &:before{
              left: -1rem;
            }
            &:after{
              right: -1rem;
            }

          }
          &:nth-of-type(1) input:before{
            content: '消极沮丧';
          }
          &:nth-of-type(1) input:after{
            content: '积极乐观';
          }
          &:nth-of-type(2) input:before{
            content: '急躁易怒';
          }
          &:nth-of-type(2) input:after{
            content: '谦和淡定';
          }
          &:nth-of-type(3) input:before{
            content: '懒散不动';
          }
          &:nth-of-type(3) input:after{
            content: '坚持锻炼';
          }
          &:nth-of-type(4) input:before{
            content: '熬夜嗜睡';
          }
          &:nth-of-type(4) input:after{
            content: '早起早睡';
          }
          &:nth-of-type(5) input:before{
            content: '暴食重口';
          }
          &:nth-of-type(5) input:after{
            content: '规律清淡';
          }
          &:nth-of-type(6) input:before{
            content: '颓废庸俗';
          }
          &:nth-of-type(6) input:after{
            content: '高雅艺术';
          }
        }
      }
    }
  }


  .chart-wrap {
    border: .0625rem solid rgba(76, 180, 231, 0.33);

    display: flex;
    flex: 1;
    flex-direction: column;

    .chart {
      flex: 1;
      height: 0; //这样可以不让内部元素撑住高度而破坏布局比例
    }
  }

}